<template>
  <div>
    <h1>腾讯云存储</h1>
    <!--
        SecretId: AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8
        SecretKey: HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty
    -->
    <input type="file" @change="upload">
    <img :src="avatar" alt="">
  </div>
</template>
<script>
/*
上传流程：
1：下载插件  yarn add cos-js-sdk-v5
2:导入  import COS from 'cos-js-sdk-v5'
3:实例化
   实际开发这个值应该从接口中获取
var cos = new COS({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
4:
  Bucket:存储桶名称
  Region:存储桶所在地域
  Key：存储的名字
  Body:文件对象
  onProgress：上传的进度值
  方法的第二个参数是上传完成的回调
*/
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  data() {
    return {
      avatar: ''
    }
  },
  methods: {
    upload(e) {
      const file = e.target.files[0]
      console.log(e.target.files[0])
      cos.putObject(
        {
          Bucket: 'abc-1305249343' /* 必须:存储桶 */,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: '/hm86/' + file.name /* 必须:名字，要求一定是字符串 */,
          StorageClass: 'STANDARD', // 固定配制
          Body: file, // 上传文件对象
          onProgress: (progressData) => {
            // 上传的进度值
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          // 上传结束
          // err有值就是失败了，没值才是成功
          // 成功才有data,data中有上传完成的接口返回值
          this.avatar = 'http://' + data.Location
          console.log(err || data)
        }
      )
    }
  }
}
</script>
<style></style>
